<template>
  <view class="whole" style="background: none">
    <scroll-view v-show="gecitext" scroll-y="true" class="geciposition">
      <view>
        <slot name="content"></slot>
      </view>
    </scroll-view>
    <view class="imt-audio" :style="{ background: background }">
      <view class="audio-wrapper" :style="{ color: color }">
        <view class="audio-number" :style="{ color: color }">{{
          format(current)
        }}</view>
        <slider
          class="audio-slider"
          :activeColor="color"
          block-size="16"
          :value="current"
          :max="duration"
          @changing="(seek = true), (current = $event.detail.value)"
          @change="audio.seek($event.detail.value)"
        >
        </slider>
        <view class="audio-number" :style="{ color: color }">{{
          format(duration)
        }}</view>
      </view>
      <view class="audio-control-wrapper" :style="{ color }">
        <view v-show="showgeci" class="audio-control-other" @click="geci">
          <u-icon name="list" size="30" :color="color"></u-icon>
          <view>列表</view>
        </view>
        <view class="audio-control-center">
          <u-icon
            name="rewind-left"
            size="50"
            :color="color"
            @click="prev"
          ></u-icon>
          <u-icon
            :name="audioInfo.isPlaying ? 'pause-circle' : 'play-circle'"
            size="50"
            :color="color"
            @click="togglePlay()"
          ></u-icon>
          <u-icon
            name="rewind-right"
            size="50"
            :color="color"
            @click="next"
          ></u-icon>
        </view>

        <view
          v-show="dqxh"
          class="audio-control-other"
          @click="xunhuan"
          :style="{ borderColor: color }"
        >
          <u-icon name="clock" size="30" :color="color"></u-icon>
          <view>定时关闭</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audio: null,
      current: 0, //当前进度(s)
      duration: 0, //总时长(s)
      paused: true, //是否处于暂停状态
      loading: false, //是否处于读取状态
      seek: false, //是否处于拖动状态
      dqxh: true, //单曲循环未点击
      qxdqxh: false, //单曲循环点击
      showgeci: true, //歌词未点击
      shutdowngeci: false, //歌词点击
      gecitext: false, //不显示歌词
    };
  },
  props: {
    src: String, //音频链接
    autoplay: Boolean, //是否自动播放
    looping: Boolean, //是否循环播放
    continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
    audioInfo: Object,
    control: {
      type: Boolean,
      default: true,
    }, //是否需要上一曲/下一曲按钮
    color: {
      type: String,
      default: "#169af3",
    }, //主色调
    background: {
      type: String,
      default: "#169af3",
    }, //主色调
  },
  methods: {
    //返回prev事件
    prev() {
      this.$emit("prev");
      uni.showToast({
        title: "上一曲",
        icon: "none",
      });
    },
    //返回next事件
    next() {
      this.$emit("next");
      uni.showToast({
        title: "下一曲",
        icon: "none",
      });
    },
    //格式化时长
    format(num) {
      return (
        "0".repeat(2 - String(Math.floor(num / 60)).length) +
        Math.floor(num / 60) +
        ":" +
        "0".repeat(2 - String(Math.floor(num % 60)).length) +
        Math.floor(num % 60)
      );
    },
    //点击播放按钮
    togglePlay() {
      this.$emit("play");
    },
  },

  created() {
    this.audio = uni.getBackgroundAudioManager();
    console.log("created");
    if (this.src) {
      this.audio.src = this.src;
      this.autoplay && this.play();
    }
    //音频进度更新事件
    this.audio.onTimeUpdate(() => {
      if (!this.seek) {
        this.current = this.audio.currentTime;
      }
      if (!this.duration) {
        this.duration = this.audio.duration;
      }
    });
    //音频播放事件
    this.audio.onPlay(() => {
    });
    //音频暂停事件
    this.audio.onPause(() => {
    });
    //音频结束事件
    this.audio.onEnded(() => {
      if (this.continue) {
        this.next();
      } else {
        this.paused = true;
        this.current = 0;
      }
    });
    //音频完成更改进度事件
    this.audio.onSeeked(() => {
      this.seek = false;
    });
  },
  watch: {
    audioInfo(audioInfo, old) {
      console.log("watch", audioInfo);
      this.audio.src = audioInfo.src;
      this.audio.title = audioInfo.title || "未命名";
      this.audio.singer = audioInfo.author;
      this.audio.coverImgUrl = audioInfo.coverImg;
      this.audio.playbackRate = audioInfo.playbackSpeed;
      this.audio.currentTime = audioInfo.currentTime;
      this.audio.isPlaying = audioInfo.isPlaying;
      if (audioInfo.isPlaying) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.imt-audio {
  width: 100%;
  padding: 30upx 0;
  background: #fff;
  /* border-radius: 20upx; */
}

.audio-wrapper {
  display: flex;
  align-items: center;
}

.audio-number {
  width: 120upx;
  font-size: 24upx;
  line-height: 1;
  color: #333;
  text-align: center;
}

.audio-slider {
  flex: 1;
  margin: 0;
}

.audio-control-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "icon" !important;
  margin-top: 40upx;
  .audio-control-other {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10upx;
    width: 200upx;
  }
  .audio-control-center {
    display: flex;
    align-items: center;
    gap: 20upx;
  }
}

.geciposition {
  /* #ifdef APP-PLUS */
  margin-top: 78upx;
  /* #endif */
  width: 85%;
  margin-top: 60px;
  height: 950upx;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 35upx;
  color: #fff;
  top: 70upx;
}

.whole {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>